<template>
  <div style="width:100%;height:100%">
    <div ref="chartEl" style="height:100%" />
  </div>
</template>
<script>
  import echarts from './echarts-config.js'
  export default {
    name: 'ChartBlock',
    data() {
      return {
        chart: null,
        option: null
      }
    },
    watch: {
      option: {
        handler(newValue, oldValue) {
          this.option = newValue
          console.log(newValue, oldValue, '11111')
          this.chart.setOption(newValue, true)
        },
        deep: true
      }
    },
    mounted() {
      this.chart = echarts.init(this.$refs.chartEl)
      this.showLoading()
      // 添加窗口改变监听
      this.chart._resize = this.$tool.throttle(() => {
        console.log(123123,this.$refs.chartEl)
        this.chart.resize()
      }, 200, 1)
      window.addEventListener('resize', this.chart._resize)
    },
    methods: {
      showLoading() {
        this.chart && this.chart.showLoading({
          text: 'loading',
          color: '#2b85e4',
          textColor: '#2b85e4',
          maskColor: 'rgba(255, 255, 255, 0.2)',
          zlevel: 0,
        })
      },
      setOption(option) {
        console.log(option)
        this.chart && this.chart.hideLoading()
        this.chart.resize()
        this.chart && this.chart.setOption(option, true)
      },
      getDateUrl() {
        this.chart.getDataURL({
          pixelRatio: 2,
          backgroundColor: '#fff'
        })
      }
    },
    beforeDestroy() {
      // 移除窗口改变监听
      window.removeEventListener('resize', this.chart._resize)
    }
  }
</script>